<template>
  <div class="middle">
    <div class="middlebg"></div>
    <el-tabs type="border-card" class="content" v-loading="loading" element-loading-background="rgba(255,255,255, 0.5)">
      <!--教案区域-->
      <div>
			    <span slot="label" class="title1 planTitle">
			    	<i class="el-icon-tickets"></i>
			    	&nbsp;&nbsp;教案
			    </span>
        <span slot="label" class="title1" @click="video">
					<i class="el-icon-caret-right"></i>
					&nbsp;&nbsp;视频
				</span>
        <span slot="label" class="title1" @click="book">
					<i class="el-icon-setting"></i>
					&nbsp;&nbsp;图书
				</span>
        <span class="search">
					<el-input clearable style="width: 200px;" v-model="planTitle" placeholder="请输入内容"></el-input>
					<el-button type="danger" @click="searchPlan">搜索</el-button>
				</span>
        <div class="one">
          <div class="circle"></div>
          <div class="adaptive">适应年级：</div>
          <div class="green" :class="{searchchange:changegreen == item.id}" plain v-for="item in list"
               @click="search(grade = item.id)">{{item.grade_title}}
          </div>
        </div>
        <div class="two">
          <div class="circle"></div>
          <div class="adaptive">教材目录：</div>
          <div type="success" class="Greens" :class="{searchchange2:changegreen2 == item.project}" plain
               v-for="item in sportList" @click="searchs(project = item.project)">{{item.title}}
          </div>
        </div>
        <div class="three" v-show="isshow">
          <div class="circle"></div>
          <div class="adaptive">教材项目：</div>
          <div type="success" class="Greens" :class="{searchchange3:changegreen3 == item.id}" plain
               v-for="item in sportLists" @click="search2(project = item.id)">{{item.title}}
          </div>
        </div>
        <el-row class="xian">
          <el-col :span="6" v-for="item in planList" :key="item.id">
            <div class="grid-content bg-purple run">
              <span>
                <img src="../../assets/image/lian2.png" alt=""/>
                <span class="title" @click="content(item.id)">{{item.motion}}</span>
              </span>
            </div>
          </el-col>
        </el-row>
        <el-pagination
          class="fenye"
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="page"
          :page-sizes="pagesizes"
          :page-size="rows"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          v-if="planList.length == 0? false :true">
        </el-pagination>
      </div>

    </el-tabs>
  </div>
</template>

<script>
  import axios from '@/assets/js/axios'

  export default {
    data () {
      return {
        loading: true,
        changegreen: false,//按钮变色
        changegreen2: false,//按钮变色
        changegreen3: false,//按钮变色
        currentPage4: 5,
        list: [],//教材适应年级
        sportList: [],//教材项目
        sportLists: [],//教材项目二级分类
        sportLists2: [],//教材项目三级分类
        planList: [],//教材内容
        isshow: false,//三级菜单
        pagesizes: [16, 20, 24, 28],
        rows: 24,
        page: 1,
        total: 20,
        grade: '',
        project: '',
        planTitle: '',
      }
    },
    methods: {
      video () {
        this.$router.push({path: '/video'})
      },
      book () {
        this.$router.push({path: '/bookList'})
      },
      handleSizeChange (val) {
      },
      handleCurrentChange (val) {
      },
      //获取适应年级
      getGrade () {
        this.$http.post('/api/plan/gradeAll')
          .then(res => {
            this.list = res.data.data
          })
      },
      //获取教材项目
      getSportproject () {
        this.$http.post('/api/plan/sportProjectList')
          .then(res => {
            this.sportList = res.data.data
          })
      },
      //获取教学资源
      getPlanList () {
        this.$http.post('/api/plan/planList',
          {
            page: this.page,
            rows: this.rows,
            grade: this.grade,
            project: this.project,
            title: this.planTitle,

          }).then(res => {
          this.loading = false
          this.planList = res.data.rows
          this.total = res.data.num
        })
      },
      //每页显示多少条数据
      sizeChange (val) {
        this.rows = val
        this.getPlanList()
      },
      //切换第几页
      currentChange (val) {
        this.page = val
        this.getPlanList()
      },
      searchPlan () {
        this.getPlanList()
      },
      //每个年级的内容
      search (id) {
        this.getPlanList()
        this.changegreen = id
      },
      //教材二级目录
      searchs (project) {
        this.changegreen2 = project
        this.$http.post('/api/plan/planSubclass', {
          id: this.project
        }).then(res => {
          this.sportLists = res.data.data
          this.isshow = true

        })
      },
      //点击教材二级菜单获取对应内容
      search2 (id) {
        this.getPlanList()
        this.changegreen3 = id
      },
      //获取教学id加入到地址栏后
      content (id) {
        this.$router.push({path: '/content/' + id})
      },
    },
    created () {
      //获取适应年级
      this.getGrade()
      //获取教材项目
      this.getSportproject()
      //获取教学资源
      this.getPlanList()
    }
  }
</script>

<style>
  .el-main {
    padding: 0;
  }

  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    color: #00b02d;
  }
</style>
<style lang="less" scoped>
  .middle {
    height: 98%;
    width: 96%;
    background: repeat center top;
    background-size: contain;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    .middlebg {
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      background: url(../../assets/image/bg-img.png) no-repeat center;
      background-size: 100%;
    }
    .content {
      padding: 0;
      position: relative;
      .search {
        position: absolute;
        right: 40px;
        top: 15px;
      }
    }
    .title1 {
      display: inline-block;
      padding: 0 10px;
      margin-bottom: 20px;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      &:hover {
        background: #00b02d;
        color: #fff;
      }
    }
    .planTitle {
      color: #fff;
      background: #00B02D;
    }
    .one, .two, .three {
      margin: 5px 0;
      margin-bottom: 25px;
      .circle {
        display: inline-block;
        width: 10px;
        height: 10px;
        background: #606266;
        border-radius: 50%;
        margin: 0 10px;
      }
      .adaptive {
        display: inline-block;
      }
      .greens {
        display: inline-block;
        background-color: #00B02D;
        margin: 0 10px;
        width: 70px;
        text-align: center;
        padding: 3px;
        border-radius: 5px;
        color: #fff;
        font-size: 16px;
      }
      .green {
        display: inline-block;
        margin: 0 10px;
        width: 70px;
        background: #f0f9eb;
        text-align: center;
        padding: 2px 7px;
        border-radius: 5px;
        color: #67c23a;
        border: 1px solid #c2e7b0;
        cursor: pointer;
        font-size: 14px;
      }
      .Greens {
        margin: 0 10px;
        margin-top: 5px;
        padding: 2px 7px;
        display: inline-block;
        background: #f0f9eb;
        border-radius: 5px;
        color: #67c23a;
        border: 1px solid #c2e7b0;
        cursor: pointer;
        font-size: 14px;
      }
      .searchchange, .searchchange2, .searchchange3, .searchchange4, .searchchange5, .searchchange6 {
        background: #67c23a;
        color: #fff;
      }
    }
    .xian {
      padding: 0 50px;
      margin: 30px 0;
      border-bottom: 1px solid #ccc;
      font-size: 14px;
      .run {
        margin: 20px 0;
        overflow: hidden; /*超出部分隐藏*/
        white-space: nowrap; /*不换行*/
        text-overflow: ellipsis; /*超出部分文字以...显示*/
        width: 260px;
        .title {
          display: inline-block;
          cursor: pointer;
        }
      }
    }
    .fenye {
      text-align: center;
    }
    .somevideo {
      text-align: center;
      .sv {
        width: 25%;
      }
      .video {
        margin-bottom: 20px;
        cursor: pointer;
        .player {
          img {
            width: 200px;
            height: 110px;
          }
        }
        .video-title {
          font-size: 0.8rem;
        }
      }

    }
    .somebook {
      .book {
        position: relative;
        margin-bottom: 30px;
        cursor: pointer;
        img {
          width: 160px;
          height: 220px;
        }
        .message {
          position: absolute;
          width: 50%;
          top: 0px;
          left: 180px;
          div {
            height: 30px;
            line-height: 30px;
            font-size: 0.8rem;
            overflow: hidden; /*超出部分隐藏*/
            white-space: nowrap; /*不换行*/
            text-overflow: ellipsis; /*超出部分文字以...显示*/
            width: 100%;
          }
          .bookname {
            font-size: 1rem;
            color: midnightblue;
            font-weight: 700;
          }
        }
      }
    }
  }

</style>
